<template>
  <div style="padding: 20px">
    <!--搜索表单-->
    <div>
      <el-input style="width: 240px; margin-left: 5px; margin-top: 5px" placeholder="请输入书名"
                v-model="params.title"></el-input>
      <el-input style="width: 200px; margin-left: 5px; margin-top: 5px" placeholder="请输入作者"
                v-model="params.author"></el-input>
      <el-input style="width: 220px; margin-left: 5px; margin-top: 5px" placeholder="请输入出版社"
                v-model="params.press"></el-input>
      <el-input style="width: 200px; margin-left: 5px; margin-top: 5px" placeholder="请输入分类"
                v-model="params.category"></el-input>
      <el-input style="width: 200px; margin-left: 5px; margin-top: 5px" placeholder="请输入用户名"
                v-model="params.username"></el-input>
      <el-button style="margin-left: 5px" type="primary" @click="load"><i class="el-icon-search"></i>搜索</el-button>
      <el-button style="margin-left: 5px" type="warning" @click="reset"><i class="el-icon-refresh"></i>重置</el-button>
    </div>

    <!--表单主体-->
    <el-table :data="tableData" stripe style="margin-top: 20px;flex: 1">
      <el-table-column type="index" label="序号" style="margin-right: 5px"></el-table-column>
      <el-table-column prop="title" label="书名" show-overflow-tooltip></el-table-column>
      <el-table-column prop="author" label="作者"></el-table-column>
      <el-table-column prop="press" label="出版社"></el-table-column>
      <el-table-column prop="category" label="分类"></el-table-column>
      <el-table-column prop="isbn" label="ISBN"></el-table-column>
      <el-table-column prop="username" label="借阅人"></el-table-column>
      <el-table-column prop="uid" label="借阅人UID"></el-table-column>
      <el-table-column prop="borrowDate" label="借阅日期"></el-table-column>
      <el-table-column prop="returnDate" label="归还日期"></el-table-column>
      <el-table-column label="操作" width="150px">
        <template v-slot="scope">
          <el-button type="primary" @click="check(scope.row)">查看</el-button>
          <el-popconfirm
              title="确定删除吗？"
              @confirm="del(scope.row.id)">
            <el-button type="danger" slot="reference" style="margin-left: 5px">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div style="margin-top: 15px; position: fixed; bottom: 5%; right: 5%">
      <el-pagination
          background
          :current-page="params.pageNum"
          :page-size="params.pageSize"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="total">
      </el-pagination>
    </div>

    <!--详情页-->
    <el-dialog
        title="详细信息"
        :visible.sync="dialogVisible"
        width="60%">
      <el-descriptions class="margin-top" :column="3" :size="'medium'" border>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-reading"></i>书名</template>
          {{ showRow.title }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-user-solid"></i>作者</template>
          {{ showRow.author }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-s-shop"></i>出版社</template>
          {{ showRow.press }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-timer"></i>出版时间</template>
          {{ showRow.publishDate }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-folder-opened"></i>分类</template>
          {{ showRow.category }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-chat-dot-round"></i>描述</template>
          {{ showRow.description }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-user-solid"></i>借阅人</template>
          {{ showRow.username }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-s-order"></i>借阅日期</template>
          {{ showRow.borrowDate }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-s-order"></i>归还日期</template>
          {{ showRow.returnDate }}
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import request from "@/utils/request";

export default {
  name: 'BookBorrowRecord',
  data() {
    return {
      tableData: [],
      total: 0,
      params: {
        pageNum: 1,
        pageSize: 10
      },
      dialogVisible: false,
      showRow: []
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      request.get('book/record', {
        params: this.params
      }).then(res => {
        if (res.code === '200') {
          this.tableData = res.data.list
          this.total = res.data.total
        }
      })
    },
    reset() {
      //点击重置按钮重置
      this.params = {
        pageNum: 1,
        pageSize: 10,
      }
      this.load()
    },
    check(row) {
      this.dialogVisible = true
      this.showRow = row
    },
    del(id){
      request.delete("/book/record/delete/" + id).then(res => {
        if(res.code === "200"){
          this.$notify.success({title: "", message:'删除成功', position: 'bottom-left'})
          this.load()
        }else{
          this.$notify.error({title: "", message:res.msg, position: 'bottom-left'});
        }
      })
    },
    handleCurrentChange(pageNum) {
      //点击分页按钮触发分页
      this.params.pageNum = pageNum
      this.load()
    },
  }
}
</script>